<template>
      <SubTitle>
        <template #subtitle>虫害监测情况</template>
      </SubTitle>
      <div class="box">
        <!-- <van-tabs v-model:active="active"> -->
   <van-tabs v-model:active="active" title-inactive-color="black" animated type="card">
  <van-tab title="二化螟"><div class="imago" ref="imago" :key="key"></div></van-tab>
  <van-tab title="三化螟"><div class="imago" ref="imago1" :key="key"></div></van-tab>
  <van-tab title="大螟"><div class="imago" ref="imago2" id="imago2" :key="key"></div></van-tab>
</van-tabs>
      </div>
  <!-- <div class="imago" ref="imago"> -->
  <!-- </div> -->
</template>

<script>
import * as echarts from 'echarts'
import SubTitle from './SubTitle.vue';
import { ref } from 'vue';
export default {
  data(){
    return {
      key:0,
    }
  },
  components:{
    SubTitle
  },
   setup() {
    const active = ref(0);
    return { active };
  },
 
    mounted(){
        setTimeout(() => {
          let imago = echarts.init(this.$refs.imago);
          
        let xdata = ['5月21','5月22','5月23','5月24','5月25','5月26','5月27','5月28','5月29','5月30'];
        let data = [11,25,43,40,27,38,20,33,10,27];
        let option = {
          xAxis:{
            type:'category',
            data:xdata,
            axisLabel:{
              interval:1,
              color:"yellow"
            }
          },
          yAxis:{
            type:'value',
            axisLabel:{
              color:'white'
            }
          },
          legend:{
            textStyle:{
              color:'white'
            }
          },
          series:[
            {
              type:'line',
              data,
              smooth:true,
              lineStyle:{
                color:'rgba(255,165,0,1)',
                width:3
              }
            }
          ]
        }
        imago.setOption(option);
        }, 1000);

        setTimeout(() => {
          let imago1 = echarts.init(this.$refs.imago1);
        let xdata = ['5月21','5月22','5月23','5月24','5月25','5月26','5月27','5月28','5月29','5月30'];
        let data = [11,25,43,40,27,38,20,33,10,27];
        let option = {
          xAxis:{
            type:'category',
            data:xdata,
            axisLabel:{
              interval:1,
                color:'yellow'
            }
          },
          yAxis:{
            type:'value',
            axisLabel:{
              color:'white'
            }
          },
          series:[
            {
              type:'line',
              data,
              smooth:true,
              lineStyle:{
                color:'rgba(30,144,255,1)',
                width:3
              }
            }
          ]
        }
        imago1.setOption(option);
        },1000);

       //  声明定时器
var timer = null
//  检查dom是否执行完成
function check() {
    let dom = document.getElementById('imago2')
    if(dom) {
         //  执行dom加载完成后的操作，例如echart的初始化操作
         //setTimeout(() => {
          let imago2 = echarts.init(document.getElementById("imago2"));
        let xdata = ['5月21','5月22','5月23','5月24','5月25','5月26','5月27','5月28','5月29','5月30'];
        let data = [11,25,43,40,27,38,20,33,10,27,12];
        let option = {
          xAxis:{
            type:'category',
            data:xdata,
            axisLabel:{
              interval:1,
              color:'yellow'
            }
          },
          yAxis:{
            type:'value',
            axisLabel:{
              color:'white'
            }
          },
          series:[
            {
              type:'line',
              data,
              smooth:true,
              lineStyle:{
                color:'rgba(255,165,0,1)',
                width:3
              }
            }
          ]
        }
        
        imago2.setOption(option);
       // }, 3000);
        //  清除定时器
        if(!timer) {
            clearTimeout(timer)
        }
    } else {
        //  自我调用
        timer = setTimeout(check, 0)
    }
}
//  首次执行
check()


        
    }
}
</script>

<style lang="less" scoped>
    .title{
width: 100%;
        border-left: skyblue 0.5rem solid;padding-left: 0.5rem;
    }
  .imago{
    width: 500px;
    height: 290px;
    text-align: center;
    display: block;
  }
  .box{
    width: 500px;
    //margin-left: 10%;
    margin-top: 20px;
  }
  @media screen and (max-width: 720px) {
    .imago{
      width: 100%;
      height: 300px;
    }
  }
</style>